<template>
  <div>
    <table-search :search-form="tableSearch" :on-submit="handleSearch" :on-reset="handleReset" />
    <el-card class="app-page">
      <div class="content">
        <div class="app-table-action-wrap">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleAdd"
          >
            新增
          </el-button>
        </div>
        <table-paging
          :table-list="tableData"
          :table-column="tableColumn"
          :table-buttons="tableButtons"
          :table-btn-width="180"
          :table-paging="pagination"
          :table-total="tableTotal"
          @pagingChange="handlePaginChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { TableSearch, TablePaging } from '@/components'
import { fetchAttendanceList, fetchAttendanceDelete } from '@/api/sanitation/attendanceShift'
import { fetchDropPartAllList } from '@/api/common/commonDropDown'

import { parseTime } from '@/utils/index'
import { tableColumn, tableSearch } from './config'
export default {
  name: 'AttendanceList',
  components: {
    TableSearch,
    TablePaging
  },
  props: {
    taskType: {
      type: Number,
      default: 0
    },
    formatColumn: {
      type: Function,
      default: (_tableColumn) => Promise.resolve(_tableColumn)
    }
  },
  data: function() {
    return {
      parseTime,
      queryData: { },
      pagination: { page: 1, pagesize: 10 },
      partList: [],
      tableSearch,
      tableData: [],
      tableColumn: [],
      tableTotal: 0,

      tableButtons: [
        {
          name: '修改',
          click: (e) => {
            this.$emit('on-shift-edit', e)
          }
        },
        {
          name: '时段设置',
          click: (e) => {
            this.$emit('on-record-list', e)
          }
        },
        {
          name: '删除',
          confirm: '确认删除吗',
          click: this.handleDelete
        }
      ]

    }
  },
  created: function() {
    this.postAttendanceList()
    this.postPartAllList()
    this.$props.formatColumn(tableColumn).then(res => {
      this.$data.tableColumn = res
    })
  },
  methods: {

    postAttendanceList() {
      const params = {
        ...this.queryData,
        type: this.$props.taskType,
        ...this.pagination
      }
      fetchAttendanceList(params).then(res => {
        this.$data.tableData = res.records
        this.$data.tableTotal = res.total
      })
    },
    postPartAllList() {
      fetchDropPartAllList().then(res => {
        const options = res.map(e => ({ key: e.id, value: e.name }))
        this.$data.partList = this.$data.tableSearch.map(e => {
          if (e.key === 'componentId') {
            e.options = options
          }
          return e
        })
      })
    },
    postAttendanceDelete(id) {
      fetchAttendanceDelete(id).then(() => {
        this.$message({
          message: '已删除',
          type: 'success'
        })
        this.postAttendanceList()
      })
    },
    handleSearch(data) {
      this.$data.pagination = { page: 1, pagesize: 10 }
      this.$data.queryData = data
      this.postAttendanceList()
    },
    handleReset(data) {
      this.$data.pagination = { page: 1, pagesize: 10 }
      this.$data.queryData = data
      this.postAttendanceList()
    },
    handleAdd() {
      this.$emit('on-shift-edit')
    },

    handleDelete(id) {
      this.postAttendanceDelete(id)
    },

    handlePaginChange(pageInfo) {
      this.$data.pagination = pageInfo
      this.postAttendanceList()
    }
  }
}
</script>

<style>

</style>
